<template>
	<view>
		<view class="content">
			<view class="add-top flex" v-for="(item,index) in addList" :key="index" @click="editAddress()">
				<view class="add-icon">
					<span class="iconfont center">&#xe614;</span>
				</view>
				<view class="add-info">
					<view class="add-user">
						<span class="userinfo name">{{item.name}}</span>
						<span class="userinfo phone">{{item.phone}}</span>
						<u-tag text="默认" bg-color="#FFE5E8" size="mini" border-color="#FFE5E8" color="#F7162C" v-if="item.isModel" />
					</view>
					<view class="add-dress province">
						<span class="userinfo">{{item.province}}</span>
						<span class="userinfo">{{item.city}}</span>
						<span class="userinfo">{{item.country}}</span>
						<span class="userinfo">{{item.street}}</span>
					</view>
				</view>
				<view class="edit-box" @click="linkAddressEdit">
					<view class="add-edit">编辑</view>
				</view>
			</view>
		</view>
		<view class="bot-btn">
			<u-button :custom-style="btnPlus" shape="circle"><span class="iconfont plus">&#xe630;</span>新增地址</u-button>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				addList: [{
					name: "张三",
					phone: "12345678920",
					city: "成都市",
					province: "四川省",
					country: "高新区",
					street: "天府大道中段53号",
					isModel: true,
					check: true
				}, {
					name: "张三",
					phone: "12345678920",
					city: "成都市",
					province: "四川省",
					country: "高新区",
					street: "天府大道中段53号",
					isModel: false,
					check: false
				}, {
					name: "张三",
					phone: "12345678920",
					city: "成都市",
					province: "四川省",
					country: "高新区",
					street: "天府大道中段53号",
					isModel: false,
					check: false
				}],
				btnPlus: {
					width: "690rpx",
					height: "80rpx",
					bordeRadius: "40rpx",
					background: " #F74F6B",
					fontSize: "30rpx",
					color: "#FFFFFF"
				}
			}
		},
		methods: {
			editAddress(url) {
				uni.navigateTo({
					url:'/pages/address/edit'
				})
			}
		},
		created() {

		},
	}
</script>

<style scoped>
	.flex {
		display: flex;
		justify-content: space-between;
		align-items: center;
	}

	.content {
		width: 100%;
		border-radius: 12rpx;
		padding: 20rpx 0 0;
	}

	.add-top {
		width: 100%;
		padding: 40rpx 20rpx;
		box-sizing: border-box;
		background: #FFFFFF;
		border-bottom: 1rpx solid #f0f0f0;
	}

	.add-icon {
		width: 48rpx;
		height: 48rpx;
		background: #F7274A;
		border-radius: 24rpx;
		line-height: 48rpx;
		text-align: center;
		color: #FFFFFF;
	}

	.add-info {
		width: 540rpx;
		padding-left: 20rpx;
	}

	.userinfo {
		display: inline-block;
		margin-right: 10rpx;
	}

	.name {
		color: #333333;
		font-size: 28rpx;
	}

	.phone {
		color: #333333;
		font-size: 28rpx;
	}

	.province {
		color: #999999;
		font-size: 26rpx;
	}

	.bot-btn {
		position: fixed;
		bottom: 0;
		left: 0;
		padding: 24rpx 30rpx;
	}

	.plus {
		margin-right: 4rpx;
		font-size: 28rpx;
	}

	.edit-box {
		width: 80rpx;
		text-align: center;
		border-left: 1rpx solid #e5e5e5;
	}

	.add-edit {
		font-size: 28rpx;
		color: #999999;
	}
</style>
